<template>
  <div class="welcome">
    <h1>欢迎使用管理系统</h1>
    <el-carousel :interval="4000"
                 type="card"
                 height="400px">
      <el-carousel-item v-for="item in img"
                        :key="item.id">
        <img :src="item.src "
             ref="IMGref"
             @load="getImgRef"
             alt="">
      </el-carousel-item>
    </el-carousel>
  </div>

</template>

<script>

export default {
  name: 'welcome',
  props: [''],
  created () {
    this.getUserInfo()
  },
  data () {
    return {
      img: [
        {
          id: '1',
          src: require('../assets/1.jpg')
        },
        {
          id: '2',
          src: require('../assets/2.jpg')
        },
        {
          id: '3',
          src: require('../assets/3.jpg')
        }
      ]
    }
  },
  methods: {
    getImgRef () {
      this.$refs.IMGref.forEach(valid => {
        valid.width = 700
        valid.height = 500
      })
    },
    async getUserInfo () {
      const { data: res } = await this.$axios.get('/student/findStudent', {
        params: {
          query: window.localStorage.getItem('studentNumber')
        }
      })
      if (res.meta.code === 200) {
        this.userInfo = res.result
        const room = {
          tower: res.result[0].tower,
          dorm: res.result[0].dorm
        }
        this.$store.dispatch('login/addTowerAndDorm', room)
      } else {
        return false
      }
    }
  }

}

</script>
<style lang='less' scoped>
.welcome {
  position: relative;
  height: 100vh;
  h1 {
    text-align: center;
    font-size: 2em;
  }
  .el-carousel {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-70%);
    .el-carousel-item {
    }
  }
}
</style>
